The Representation and Performance of Responsive Web Page Based on HTML5 and CSS3

Abstract

Responsive web design solves the compatibility problems of web pages displayed at different resolutions, different platforms, and different screen sizes and also brings a high-quality experience to users. Based on the research on responsive web design and related technologies like HTML5 and CSS3, this paper expounds on the design ideas and key technologies of responsive design with a responsive enterprise website. Response web design based on HTML5 and CSS3 has proved to be possible and valuable.

Introduction

I. INTRODUCTION

The Internet has entered the Web 2.0 era. At the same time, with the development of mobile communication technology, more and more smart mobile terminals have been widely used in various industries, which have prompted Internet applications to adapt to the needs of mobile terminals. Traditional websites are designed for PCs. The design of such websites cannot be adapted to mobile phones or other mobile device interfaces.

In order to make mobile application devices achieve the best display effect, special web pages are usually designed according to the display characteristics of the device itself. Therefore, it has become a hot research topic to make mobile devices normally display traditional web pages and improve the user experience. In this paper, we study the responsive web page design technology based on HTML5 and CSS3.

Firstly, this paper analyses the basic idea of responsive web page design, the process, and the key technologies of responsive web page development. On this basis, we present a development example of a responsive enterprise website. The website can adjust the page layout by automatically detecting the screen size of the device and can ensure that the page content is displayed normally on PC monitors, pads, mobile phones, and other devices of different resolutions. This design proposal has greatly enhanced the user's experience.

II. CONCEPT

The idea of responsive Web design development was first proposed by Ethan Marcotte in 2010. The core idea is to enable web pages to have cross-platform, adaptive, and other functions. They can adapt their own parameters, change layout forms, and adjust picture resolutions according to the screen sizes of different hardware devices or browser windows. The core design idea of responsive web development is "mobile priority and progressive enhancement". "Mobile Priority" means that when designing a page, we fully consider the diversity of the size and resolution of the mobile terminal and first design the page effect of the mobile terminal so as to realize the layout of an adaptive mobile terminal. Then the page effect on the PC side is taken into consideration, which is beneficial to enhance the efficiency of web development. "Progressive Enhancement" refers to the gradual conversion of page display from small to large size under the premise of giving priority to mobile terminal devices. In the limited display space of small size, the content of the page should be highlighted, and the content performance should be simplified. With the size increase and the content unchanged, the performance of the content should be improved, making the page display better.

III. CORE TECHNOLOGIES

A.. HTML5—Cross-Platform Language

The cross platform advantage of HTML5 has been shown in the era of mobile Internet, and it is the only cross platform language widely applicable to mainstream platforms such as PC, MAC, Android, Windows Phone, etc. This feature of HTML5 coincides with the cross platform in "responsive web design". The cross platform compatibility of HTML5 language makes it have unique advantages in responsive development.

B. CSS3 Media Query Module

In the past, developers needed to provide different codes for different devices to ensure the consistency of the effect of web pages. The responsive web page can recognize the screen width, adjust the layout structure and picture size adaptively according to the obtained parameters, and achieve the effect of "one-time design, universal use". At the same time, HTML5 and CSS3 provide technical support for responsive web design.

The media query module of CSS3 allows to add media query expressions to specify media types and select corresponding expressions according to different media types. The definition of media query given by W3C is: "media query contains media type and zero or more expressions to detect media characteristics. Width, height, and color are all features that can be used for media query. Using the media query function can adapt the web page to different devices without modifying the content itself."

C.  Fluid Grids

The fluid grid makes the position of each layer flexible and predictable. The method of pixel design will be changed to a percentage size or font proportion, with the advantage that the layout can be adjusted automatically according to the obtained media query parameters.

D.  Flexible Images

"Flexible Images" means that the size of pictures is variable. For example, the size of a picture is 600 px by 600 px. According to the characteristics of a flexible layout, it can be expressed as a size of 100%. When the proportion of the container changes on different size displays, the picture will also be resized to fit the container. So, we can make sure that the picture can adjust its own size adaptively to different sizes of media and realize the responsive change of web pages.

IV. WEB DESIGN REPRESENTATION

In this term paper, we have designed a responsive enterprise website, which needs to be able to adapt to all kinds of mobile devices such as PCs and pads, and at the same time, it needs to have a good-looking and liberal interface.  The home page of the website is separated into seven modules: #header wrap (logo), #main navigation, #layer slider, #home-intro, #feature-block, # intro-features, and #copyrights. As shown in Figure 3 and Figure 4, the page layout will be used to as follows:  crease the navigation bar into a pull-down menu.  Adjust the size of the picture to be suitable for the mobile device.  The font should be reduced appropriately. Column widths in the blocks "# feature-block" and "# intro-features" are automatically set to 100%. 

A. Html 5

HTML5 adds the viewport factor to get the width of devices and also prevent users from zooming the page by fixing the viewport size. Viewport provides valuable data information for responsive web page design. The specific propose method is to set the next code at the head of the page:  <meta name="viewport" content= "width=device-width, initial-scale=1, maximum-scale=1">

B. Media Query

Three different media query functions are set up on this website, which are suitable for PC terminals with a window width of between 768px and 959px; 480px and 767px; and 320px and 479px. The original navigation bar on the mobile workstation device will be set as undetectable, and the menu will be placed in a pull-down folding effect by setting the "select" label in the form control. The solution media query codes are as follows:

C. Flexible Design

The flexible design concept of this website is mainly reflected in the font size, image size, padding, and margin values. All parameter values are relative sizes, i.e. percentage which will automatically adjust the pixel value according to the size of the browser or the size of the device. This reduces the complexity of the code and improves the user experience. In addition, we should pay attention to the clarity of the image after zooming in on the flexible design. Now and then it is needed to make some specific small pictures to match the mobile device; if not, some pictures may be distorted outside of the usual scaling. The picture of the slider module #layerslider on this website is set in two different sizes. Media selected according to query, pictures on different devices, and different sizes.

D. Web Page Instance

The activity website in this paper can without human intervention adapt to the size of the user’s device; the website can be acquainted with the screen width and automatically adopt the appropriate resolution and display mode to achieve the best user experience. The home page display effect of PCs and mobiles is shown in Figure 5

Conclusion

In this paper, the effectiveness and feasibility of responsive web design are verified by a real-world case study. The responsive enterprise developed based on HTML5 and CSS3 can automatically adapt to various resolutions of PCs and different sizes of mobile devices, fully reflecting the characteristics of \"one-time design, universal use.\" For developers, it is more efficient and convenient to update, which can effectively reduce the cost of time and labor. Users, no matter whether on PCs, pads, or mobile phones, can see websites with the same style and content and get a better user experience.

References

[1] J Mazzei.Responsive Web Design[J]. Business NH Magazine, 2012, 9(6): 22-23. [2] Ethan Marcotte. Responsive Web Design [EB/OL].http://www.alistapart.com/ articles/ responsive-Webdesign/ 2010-05-25. [3] Tim.Kadlec, \"Implementing Responsive design\" [M], 1st ed. New riders Berkley, 2012 60-100. [4] C R Venkatesh. Infographic: Responsive Web Design [J/OL]. http://www.Artofdeveloping.com/2012/09/infographic-responsive Webdesign. html, 2012-08-29. [5] S Mohorovi ci c. Implementing Responsive Web Design for Enhanced Web Presence[C]. Information & Communication Technology Electronics & Microelectronics (MIPRO), 2013,36th International Convention on IEEE, 2013: 1206-1210. [6] M Chowdhary. Responsive Web Design Will Be Expected on All Devices[J/OL].http://multichannelmerchant.com/crosschannel/responsive- Webdesign-will-be-expected-on-all-devices-15092012/, 2012-09-15. [7] Paul Montgomery, Jane A Dennis,”Bright light therapy for sleep problems in adults aged 60+ (Review),” Edited (no change to conclusions), published in Issue 1, 2009. [8] H.S. Driver, and S.R. Taylor, “Exercise and sleep,” Sleep Medicine Reviews, Vol. 4, No. 4, pp. 387-402, 2000 [9] Wei-Ting Lai, Hsing Mei, “Mashing Up a Trustworthy Virtual Health 2.0 Testbed,” Workshop on Agent Technology and Software Environments(TCSE), Taiwan, June 2008. [10] Shiao-Ping Cheng, Hsing Mei, “A Personalized Sleep Quality Assessment Mechanism based on Sleep Pattern Analysis,” Proceedings of The 3rd International Conference on Innovations in Bio-Inspired Computing and Applications (IBICA 2012), Kaohsiung, Taiwan,September 2012, pp. 133-138. [11] Janne Kuuskeri and Tommi Mikkoonen, ”Partitioning Web Applications Between the Server and Client, “in Proceedings of the 2009 ACM symposium on Applied Computing, pp.647-652, 2009. [12] M. Heiderich, Scriptless attacks Stealing more pie without touching the sill, Journal of Computer Security, p.567-599, July 2014. [13] andlabs, JS-RECONHTML5 based JavaScript Network Reconnaissance Tool, http://www.andlabs.org/tools/jsrecon.html [14] andlabs, Chrome and Safari users open to stealth HTML5 AppCache attack, http://blog.andlabs.org/2010/06/chrome-and-safari-users-open-tostealth. html, June 2010. [15] Kuppan, Attacking with HTML5, Blackhat, 2010 [16] Weaver, Aaron. \"Cross site printing.\" 2007.

Copyright

Copyright © 2022 Dr. A. S. Shanthi, G. Kokila, K. Mohammed Rafeeque. This is an open access article distributed under the Creative Commons Attribution License, which permits unrestricted use, distribution, and reproduction in any medium, provided the original work is properly cited.